<template>
	<view class="search">
		<!-- 搜索页面布局 -->
		<!--左侧的数据布局  -->
		<view class="searchLeft">
			<scroll-view scroll-y="true" class="search_left">
				<block v-for="(item,index) in search_left" :key="index">
					<view class="left" @click="fen_left(item)"
						:class="item._id==pid?'aa':''"
					>{{item.title}}</view>
				</block>
			</scroll-view>
		</view>
		<!-- 右侧的数据布局 -->
		<view class="searchRight">
			<scroll-view scroll-y="true" >
				<block v-for="(item,index) in search_right" :key="index">
					<view class="search_right">
						<image :src="'http://jd.itying.com/'+item.pic" mode="widthFix" lazy-load></image>
						<view class="search_right_one">
							<view class="search_right_two">{{item.title}}</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search_left:[],
				search_right:[],
				pid:'59f1e1ada1da8b15d42234e9 '
			}
		},
		onLoad() {//初始化页面时，渲染数据，只执行一次
			//获取左侧的一级分类数据
			uni.request({
				url:'http://jd.itying.com/api/pcate',
				success: (res) => {
					// console.log(res);
					// console.log(res.data.result);
							var arr=res.data.result;
							this.pid=arr[0]._id;//将第一个id的值赋值给一个变量
							console.log(this.pid);
							 arr.forEach((item) =>{
								 item['pic'] = item['pic'].replace(new RegExp(/\\/g), '/');
									  });
							this.search_left=arr;
				},fail: () => {
					console.log('分类左侧数据读取失败');
				}
			});
			//刚进入页面时，初始化渲染右侧的数据
			this.right();
			// uni.request({
			// 	url:'http://jd.itying.com/api/pcate?pid='+this.pid,
			// 	success: (res1) => {
			// 		console.log(this.pid);
			// 		console.log(res1);
			// 		// console.log(res.data.result);
			// 				var arr1=res1.data.result;
			// 				 arr1.forEach((item) =>
			// 						  {item['pic'] = item['pic'].replace(new RegExp(/\\/g), '/');
			// 				});
			// 				this.search_right=arr1;
			// 	},fail: () => {
			// 		console.log('分类右侧数据读取失败');
			// 	}
			// })
			
		},
		methods: {
			fen_left(val){
				this.pid=val._id;
				// console.log(this.pid);
				//左侧点击时调用
				// this.$store.commit('right',this.pid);
				this.right();
			},
			right(){
				uni.request({
					url:'http://jd.itying.com/api/pcate?pid='+this.pid,
					success: (res1) => {
						console.log(this.pid);
						console.log(res1);
						// console.log(res.data.result);
								var arr1=res1.data.result;
								 arr1.forEach((item) =>
										  {item['pic'] = item['pic'].replace(new RegExp(/\\/g), '/');
								});
								this.search_right=arr1;
					},fail: () => {
						console.log('分类左侧数据读取失败');
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.aa{
		color: red;
	}
	//z右侧布局
	.searchRight{
		overflow: auto;
		padding: 20upx;
		flex: 1;
		.search_right{
			display: flex;
			justify-content: space-around;
			width: 100%;
			height: 100upx;
			align-items: center;
			// border: 1px solid #007AFF;
			margin: 10upx 0;
			&>image{
				width: 100upx;
				height: 100upx;
			}
			.search_right_one{
				flex: 1;
				padding: 10upx 20upx;
			}
			
		}
	}
	// 左侧布局
	.searchLeft{
		overflow: auto;
		width: 200upx;
		height: 100%;
		border-right: 1px solid #C0C0C0;
		.search_left{
			height:100%;
			.left{
				height: 160upx;
				line-height:160upx;
				text-align: center;
				border-bottom: 1px solid #C0C0C0;
			}
		}
	}
	// 全局布局
	.search{
		width: 100%;
		height: 100%;
		display: flex;
		// border: 1px solid #007AFF;
	}
	page{
		height: 100%;
	}
</style>
